<template>
	<view style="height: 100%;">
		<navbar title="报名记录" :back="true" color="#fff" bgColor="#3277fc" leftIconColor="#fff"></navbar>
	    <view style="position: fixed;z-index: 20000;left: 0;width: 100%;background-color:#3277fc;padding:20rpx 0;" :style="{top:`${topheight}px`}">	
			<view  style="background-color: rgba(167, 167, 167,.2);border-radius: 26rpx;margin:0 40rpx 20rpx 40rpx;">
				<u-search placeholder="输入会议主题名称" v-model="page.keyword" shape="round" :showAction="false" @search="search"  bgColor='#fff' color='#000' searchIcon='search' placeholderColor='##a5a5a5' searchIconColor='#a5a5a5'>
				</u-search>
			</view>
			<u-tabs :list="tabList" @click="changTab" lineColor="#fff" sticky :inactiveStyle="{color:'#fff',fontWeight:'450'}" :activeStyle="{color:'#fff',fontWeight:'650'}"></u-tabs>
		</view>
		<view style="height: 204rpx;"></view>
		<view class="conter">
		    <view style="padding: 0 20rpx 20rpx 20rpx;" v-if="list.length!=0">
				<view v-for="(item,index) in list" :key="index" style="background-color:#fff;border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;" @click="goCard(`/pages/sub/store/recordet?id=${item.id}`)">
					<view style="display: flex;justify-content: space-between;align-items:center;padding-bottom: 20rpx;border-bottom: 2rpx solid rgba(112, 112, 112,.15);">
						<view style="font-size: 30rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;width: 420rpx;font-weight: 700;">{{item.name}}</view>
						<view style="color:#3c7efc;font-weight: 650;font-size: 28rpx;" v-if="item.statue==0">预约中</view>
						<view style="color:#fcb245;font-weight: 650;font-size: 28rpx;" v-if="item.statue==1">进行中</view>
						<view style="color:#c3c3c3;font-weight: 650;font-size: 28rpx;" v-if="item.statue==2">已结束</view>
					</view>
					<view style="display: flex;border-bottom: 2rpx solid rgba(112, 112, 112,.15);padding: 20rpx 0;">
						<image :src="item.image"  style="width: 200rpx;display:block;border-radius: 20rpx;height: 200rpx;"></image>
						<view style="margin-left: 20rpx;color: #818181;">
							<view style="font-size:24rpx;margin: 10rpx 0;">会议类型 : {{item.industryName}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;">开始时间 : {{item.beginTime}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;">结束时间 : {{item.endTime}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;" v-if="item.signTime!=null">签到时间 : {{item.signTime}}</view>
							<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
								<view style="font-size: 24rpx;margin-right: 6rpx;">参与人员 :</view>
								<view v-for="(e,d) in item.proType" :key="d" style="display: flex;align-items: center;">
									<view style="font-size: 26rpx;margin-left:8rpx;">{{e.type}}</view>
								</view>
							</view>
						</view>
					</view>
					<view style="margin-left: 30rpx;">
						<view style="font-size: 28rpx;margin-bottom: 20rpx;font-weight: 650;padding-top: 20rpx;">
							人员比例:
						</view>
						<view v-for="(e,d) in item.proType" :key="d" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;padding: 0 20rpx;">
							<view style="font-size: 24rpx;margin-left: 10rpx;">{{e.type}}</view>
							<view style="display: flex;justify-content: space-between;align-items: center;width: 85%;">
								<view style="width: 80%;">
									<u-line-progress :percentage="(e.makeNum/e.People)*100" :showText="false" activeColor='#3277fc' height='8'></u-line-progress>
								</view>
								<view style="font-size: 20rpx;text-align: center;color:#999999;margin-left: 20rpx;">{{e.makeNum}} / {{e.People}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
            <view class="" v-else>
            	<u-empty
            	        mode="list"
            	        icon="http://cdn.uviewui.com/uview/empty/list.png"
            			text='暂无报名记录'
            	>
            	</u-empty>
            </view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/baseNavbar.vue"
	import {
		goNav
	} from '@/lib/Comment.js'
	import {
		getmanageList
	} from "@/api/make.js"
	export default{
		components:{
			navbar
		},
		data(){
			return{
				loadend: false,
				loading: false,
				topheight:'',
				list:[],
				tabList:[
					{
						name:'全部',
						statue:''
					},{
						name:'预约中',
						statue:0
						
					},{
						name:'进行中',
						statue:1
					},{
						name:"己结束",
						statue:2
					}
				],
				type:[],
				page: {
					page: 1,
					limit: 10,
					statue:'',
					keyword:''
				}
			}
		},
		onLoad(){
			this.resetList()
			this.topheight = uni.getMenuButtonBoundingClientRect().bottom+4
		},
		methods:{
			search(){
				this.resetList()
			},
			changTab(e){
				this.page.statue = e.statue
				console.log(this.page.statue);
				this.resetList()
			},
			resetList(callback){
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
				
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				getmanageList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.list.forEach(item=>{
						console.log('111111111111');
						item.proType=[]
						let pType=[]
						item.type.forEach(e=>{
							console.log('211111111111');
							let obj = {}
							if(e==0){
								obj.type='达人'
								obj.makeNum = item.drMakeNum
								obj.People=item.drPeople
								console.log('311111111111');
								item.proType.push(obj)
								
							}else if(e==1){
								obj.type='商家'
								obj.makeNum = item.sjMakeNum
								obj.People=item.sjPeople
								item.proType.push(obj)
								console.log('411111111111');
							}else if(e==2){
								obj.type='团长'
								obj.makeNum = item.tzMakeNum
								obj.People=item.tzPeople
								item.proType.push(obj)
								console.log('511111111111');
							}else if(e==3){
								obj.type='机构'
								obj.makeNum = item.jgMakeNum
								obj.People=item.jgPeople
								item.proType.push(obj)
								console.log('511111111111');
							}
						})
					})
					console.log('list',this.list);
					
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			},
			goCard(url, appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						envVersion: 'release'
					})
				} else {
					goNav(url)
				}
			
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color:#f5f5f5;
	}
</style>
<style lang="scss" scoped>
	
</style>